<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>龙华系统研发中心 - LoongChineOperatingSystem</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            background-image: url('https://example.com/background-tech.jpg'); /* 添加背景图片 */
            background-size: cover;
            background-attachment: fixed;
            color: #333;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .header {
            background-color: rgba(0, 86, 179, 0.8); /* 调整背景颜色以保持透明度 */
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        .nav {
            display: flex;
            justify-content: center;
            background-color: rgba(0, 68, 148, 0.8); /* 调整背景颜色以保持透明度 */
            padding: 5px 0;
        }
        .nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        .nav a:hover {
            text-decoration: underline;
            color: #f4f4f9;
        }
        .container {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            flex-wrap: wrap;
        }
        .section {
            background-color: rgba(255, 255, 255, 0.8); /* 调整背景颜色以保持透明度 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            margin-bottom: 20px;
            display: none; /* 默认隐藏所有内容区域 */
        }
        .section.active {
            display: block; /* 显示被激活的内容区域 */
        }
        .section h2 {
            color: #0056b3;
            margin-bottom: 10px;
        }
        .section a {
            color: #0056b3;
            text-decoration: none;
            font-weight: bold;
        }
        .section a:hover {
            text-decoration: underline;
        }
        .section button {
            background-color: #0056b3;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .section button:hover {
            background-color: #004494;
        }
        .content {
            flex: 1;
        }
        .footer {
            background-color: rgba(0, 86, 179, 0.8); /* 调整背景颜色以保持透明度 */
            color: white;
            text-align: center;
            padding: 10px 0;
            width: 100%;
        }
        .icon {
            margin-right: 10px;
            font-size: 1.2em;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #0056b3;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-group input:focus {
            border-color: #0056b3;
            outline: none;
        }
        .error-message {
            color: red;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>龙华系统研发中心 - LoongChineOperatingSystem</h1>
    </div>
    <div class="nav">
        <a href="#" onclick="showSection('download')">
            <i class="fas fa-download icon"></i>软件下载
        </a>
        <a href="#" onclick="showSection('news')">
            <i class="fas fa-newspaper icon"></i>开发者新闻
        </a>
        <a href="#" onclick="showSection('forum')">
            <i class="fas fa-users icon"></i>论坛
        </a>
        <a href="#" onclick="showSection('projects')">
            <i class="fas fa-project-diagram icon"></i>项目管理
        </a>
        <a href="#" onclick="showSection('people')">
            <i class="fas fa-user-tag icon"></i>人员管理
        </a>
        <a href="#" onclick="showSection('login')">
            <i class="fas fa-sign-in-alt icon"></i>登录
        </a>
        <a href="#" onclick="showSection('register')">
            <i class="fas fa-user-plus icon"></i>注册
        </a>
    </div>
    <div class="content">
        <div class="container">
            <div class="section" id="download" style="display: block;">
                <h2>软件下载</h2>
                <p>欢迎下载LoongChineOperatingSystem，适用于多种设备。</p>
                <button onclick="alert('下载功能暂未实现')">
                    <i class="fas fa-download icon"></i>下载
                </button>
            </div>
            <div class="section" id="news">
                <h2>开发者新闻</h2>
                <p>最新开发动态和公告。</p>
                <a href="#">
                    <i class="fas fa-newspaper icon"></i>查看新闻
                </a>
            </div>
            <div class="section" id="forum">
                <h2>论坛</h2>
                <p>与开发者社区交流，分享经验和想法。</p>
                <a href="#">
                    <i class="fas fa-users icon"></i>进入论坛
                </a>
            </div>
            <div class="section" id="projects">
                <h2>项目管理</h2>
                <p>查看和管理正在进行的项目。</p>
                <a href="#">
                    <i class="fas fa-project-diagram icon"></i>管理项目
                </a>
            </div>
            <div class="section" id="people">
                <h2>人员管理</h2>
                <p>管理团队成员和权限。</p>
                <a href="#">
                    <i class="fas fa-user-tag icon"></i>管理人员
                </a>
            </div>
            <div class="section" id="login">
                <h2>登录</h2>
                <form id="loginForm">
                    <div class="form-group">
                        <label for="loginUsername">用户名</label>
                        <input type="text" id="loginUsername" placeholder="用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <input type="password" id="loginPassword" placeholder="密码" required>
                    </div>
                    <button type="submit" onclick="handleLogin(event)">
                        <i class="fas fa-sign-in-alt icon"></i>登录
                    </button>
                </form>
                <p><a href="#" onclick="showSection('resetPassword')">忘记密码？</a></p>
            </div>
            <div class="section" id="register">
                <h2>注册</h2>
                <form id="registerForm">
                    <div class="form-group">
                        <label for="registerUsername">用户名</label>
                        <input type="text" id="registerUsername" placeholder="用户名" required>
                        <p class="error-message" id="usernameError"></p>
                    </div>
                    <div class="form-group">
                        <label for="registerEmail">邮箱</label>
                        <input type="email" id="registerEmail" placeholder="邮箱" required>
                        <p class="error-message" id="emailError"></p>
                    </div>
                    <div class="form-group">
                        <label for="registerPassword">密码</label>
                        <input type="password" id="registerPassword" placeholder="密码" required>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认密码</label>
                        <input type="password" id="confirmPassword" placeholder="确认密码" required>
                        <p class="error-message" id="passwordError"></p>
                    </div>
                    <button type="submit" onclick="handleRegister(event)">
                        <i class="fas fa-user-plus icon"></i>注册
                    </button>
                </form>
            </div>
            <div class="section" id="resetPassword">
                <h2>重置密码</h2>
                <form id="resetPasswordForm">
                    <div class="form-group">
                        <label for="resetEmail">邮箱</label>
                        <input type="email" id="resetEmail" placeholder="邮箱" required>
                    </div>
                    <button type="submit" onclick="handleResetPassword(event)">
                        <i class="fas fa-key icon"></i>重置密码
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="footer">
        <p>版权所有 © 2023 龙华系统研发中心</p>
    </div>
    <script>
        function showSection(sectionId) {
            // 隐藏所有内容区域
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => section.classList.remove('active'));

            // 显示指定的内容区域
            const sectionToShow = document.getElementById(sectionId);
            if (sectionToShow) {
                sectionToShow.classList.add('active');
            }
        }

        function handleLogin(event) {
            event.preventDefault();
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            // 这里可以添加登录验证逻辑
            alert(`尝试登录: 用户名 - ${username}, 密码 - ${password}`);
        }

        function handleRegister(event) {
            event.preventDefault();
            const username = document.getElementById('registerUsername').value;
            const email = document.getElementById('registerEmail').value;
            const password = document.getElementById('registerPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            // 清除之前的错误信息
            document.getElementById('usernameError').textContent = '';
            document.getElementById('emailError').textContent = '';
            document.getElementById('passwordError').textContent = '';

            // 验证用户名是否已被注册
            if (username === 'existingUser') {
                document.getElementById('usernameError').textContent = '用户名已被注册';
                return;
            }

            // 验证邮箱格式
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(email)) {
                document.getElementById('emailError').textContent = '邮箱格式不正确';
                return;
            }

            // 验证密码是否一致
            if (password !== confirmPassword) {
                document.getElementById('passwordError').textContent = '密码不一致';
                return;
            }

            // 这里可以添加注册验证逻辑
            alert(`尝试注册: 用户名 - ${username}, 邮箱 - ${email}, 密码 - ${password}`);
        }

        function handleResetPassword(event) {
            event.preventDefault();
            const email = document.getElementById('resetEmail').value;
            alert(`尝试重置密码: 邮箱 - ${email}`);
        }
    </script>
    <!-- 引入Font Awesome图标库 -->
    <script src="https://kit.fontawesome.com/your-font-awesome-kit.js" crossorigin="anonymous"></script>
</body>
</html>
